<!--  -->
<template>
  <el-container v-loading="isLoading"
   element-loading-text="加载中...">
    <el-main>
      <div class="item">
        <h1>官方榜</h1>
        <el-row :gutter="30">
          <el-col
            v-for="(item, index) in list.slice(0, 4)"
            :key="index"
            :span="4.5"
            style="position: relative"
          >
            <div class="image">
              <img @click="ToDetail(item.id)" :src="item.coverImgUrl" alt="" />
              <div
                style="
                  font-size: 13px;
                  color: white;
                  position: absolute;
                  top: 2%;
                  right: 8%;
                  text-shadow: 0px 0px 2px #000000;
                "
              >
                <i class="el-icon-headset"></i>
                {{
                  item.playCount >= 10000
                    ? (item.playCount / 10000).toFixed(0) + "万"
                    : item.playCount
                }}
              </div>
              <span class="name">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="item">
        <h1>全球榜</h1>
        <el-row :gutter="30">
          <el-col
            v-for="(item, index) in list.slice(4, 32)"
            :key="index"
            :span="4.5"
            style="position: relative"
          >
            <div class="image">
              <img @click="ToDetail(item.id)" :src="item.coverImgUrl" alt="" />
              <div
                style="
                  font-size: 13px;
                  color: white;
                  position: absolute;
                  top: 2%;
                  right: 8%;
                  text-shadow: 0px 0px 2px #000000;
                "
              >
                <i class="el-icon-headset"></i>
                {{
                  item.playCount >= 10000
                    ? (item.playCount / 10000).toFixed(0) + "万"
                    : item.playCount
                }}
              </div>
              <span class="name">{{ item.name }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'

import { getRank } from "util/findMusic";
export default {
  name: "",
  data() {
    return {
      list: [],
    };
  },
    computed: {
    ...mapGetters('musicPlay', [
      // 加载状态
      'isLoading'
    ])
  },
  created() {
    this.getRank();
  },
  methods: {
  
    async getRank() {
      this.$store.dispatch('musicPlay/changeIsLoading', true)

      let {
        data: { list },
      } = await getRank();
      this.list = list;
      this.$store.dispatch('musicPlay/changeIsLoading', false)

    },

    ToDetail(id) {
      this.$router.push("/songListPage/" + id);
    },
  },
};
</script>

<style scoped>
.el-main {
  margin-top: 10px;
  padding: 0 90px;
}
.el-col {
  margin-bottom: 20px;
}
.item h1 {
  font-size: 21px;
  margin-bottom: 15px;
}
.item .image {
  width: 200px;
}
.item .image img {
  border-radius: 6px;
  width: 100%;
  transition: all 0.4s;
}
.item .image img:hover {
  transform: translateY(-5px);
  box-shadow: 3px 10px 10px 0 rgba(0, 0, 0, 0.1);
}
</style>